<template>
  <div class="company-info">
    <van-tabs v-model="active" class="companyData">
      <van-tab title="公司资料">
        <van-card class="information">
          <template #tags>
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">公司资质</span>
            </van-row>
            <van-grid
              :border="false"
              :column-num="3"
              :gutter="10"
              v-if="companyinfo[0]"
            >
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image last" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
            </van-grid>
            <!--  -->
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">办公环境</span>
            </van-row>
            <van-grid
              :border="false"
              :column-num="3"
              :gutter="10"
              v-if="companyinfo[0]"
            >
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image last" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
            </van-grid>
            <!--  -->
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">获得荣誉</span>
            </van-row>
            <van-grid
              :border="false"
              :column-num="3"
              :gutter="10"
              v-if="companyinfo[0]"
            >
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image " :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image last" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
            </van-grid>
            <!--  -->
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">团队风采</span>
            </van-row>
            <van-grid
              :border="false"
              :column-num="3"
              :gutter="10"
              v-if="companyinfo[0]"
            >
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
              <van-grid-item>
                <img class="image last" :src="companyinfo[0].firmphoto" />
              </van-grid-item>
            </van-grid>
            <!--  -->
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">基本资料</span>
            </van-row>
            <p v-if="companyinfo[0]">公司名称：{{ companyinfo[0].name }}</p>
            <p v-if="companyinfo[0]">法人代表：{{ companyinfo[0].stiftung }}</p>
            <p v-if="companyinfo[0]">公司电话：0731-86912560 公司规模：200人以下</p>
            <p v-if="companyinfo[0]">公司地址：{{ companyinfo[0].adress }}</p>
            <!--  -->
            <!--  -->
            <van-row class="head">
              <i class="iconfont jiazhengshuxian"></i>
              <span class="title">公司介绍</span>
            </van-row>
            <p v-if="companyinfo[0]">
              {{
                companyinfo[0].name
              }}以家庭生活需求为导向，以资源的调整、整合为基础，以专业、便利的服务为手段，立足于系统解决和实现各类家政需求，引导客户家庭健康可持续发展、推动社会进步，公司致力于打造成为最具影响力的品质家政管理规范的制定者和中式家政服务的集成者。
            </p>
            <!--  -->
          </template>
        </van-card>
      </van-tab>
      <!-- 
          注册人员
       -->
      <van-tab title="注册人员">
        <people />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getcompanys } from "@/api/user";
import people from "./people";
export default {
  name: "companyInfo",
  components: {
    people
  },
  data() {
    return {
      active: 2,
      companyinfo: [],
      id: this.$route.query.id
    };
  },
  created() {
    this.getcompanys();
  },
  mounted() {},
  methods: {
    async getcompanys() {
      const { data } = await getcompanys();

      this.companyinfo = data.filter(item => item.id === this.id);
      console.log(this.companyinfo);
    }
  }
};
</script>

<style scoped lang="scss">
.companyData {
  font-size: 28px;
  width: 674px;
  margin-left: 40px;
  background-color: #fff;

  p {
    font-size: 24px;
    color: #8a8686;
  }

  ::v-deep .van-grid-item__content {
    padding: 0px;
  }
  .information {
    font-size: 28px;
    width: 674px;
    background-color: #fff;
  }
  .head {
    border-top: 4px solid #f8f8f8;
    padding-top: 36px;
    margin-bottom: 26px;
  }

  //   下侧高亮
  ::v-deep .van-tabs__line {
    width: 112px;
    height: 4px;
    background-color: #3f51b5;
  }
  .van-card {
    padding: 0rem 0.42667rem 0.21333rem;
  }
  // 字体图标
  .jiazhengshuxian {
    font-size: 32px;
    color: #3f51b5;
  }
  .image {
    width: 200px;
    height: 148px;
  }
  .last {
    transform: translate(200%, -100%);
  }
  ::v-deep.van-grid-item {
    padding-right: 0 !important;
  }
}
</style>
